
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import Pagination from '@/components/common/Pagination'
import { Loading } from '@/components/ui/loading'
import { Empty } from '@/components/ui/empty'
import { cn } from '@/lib/utils'

import type { BasicTableRecord, TableConfig } from '@/types/table'

const AppTable = <T extends BasicTableRecord & {
  [key: string]: unknown
}>({
  columns,
  dataSource,
  pagination = {
    pageSize: 10,
    total: 0,
    current: 1,
  },
  loading = false,
  caption,
  wrapperClassName = '',
  className = '',
  style,
  onPageChange = () => { },
}: TableConfig<T>): JSX.Element => {

  return <div className={cn('pt-4', wrapperClassName)}>
    <div className={cn('basic-table', '[&>div]:max-h-[440px]', className)}>
      <Table className={cn('min-w-[calc(100vw-3rem)] sm:min-w-[600px]')} style={style}>
        {caption && <TableCaption>{caption}</TableCaption>}
        <TableHeader>
          <TableRow className={cn('*:whitespace-nowrap sticky top-0 hover:bg-white',
            "bg-background after:content-[''] after:inset-x-0 after:h-px after:bg-border after:absolute after:bottom-0",
            'h-10')}
          >
            {columns.map((column, index: number) => {
              return <TableHead
                key={column.dataIndex}
                className={cn(index === 0 ? 'pl-2' : '', column.align ? `text-${column.align}` : '')}
                align={column.align}
                style={{
                  width: column.width ? `${column.width}px` : 'auto',
                  minWidth: column.minWidth ? `${column.minWidth}px` : 'auto',
                  maxWidth: column.maxWidth ? `${column.maxWidth}px` : 'auto',
                }}
                colSpan={column.colSpan}
              >{column.header ? column.header() : column.title}</TableHead>
            })}
          </TableRow>
        </TableHeader>
        <TableBody className={cn('overflow-hidden')}>
          {loading ? <TableRow className='border-b-0 hover:bg-white'>
            <TableCell colSpan={columns.length} className={cn('text-center', dataSource.length === 0 ? 'h-50' : 'h-100')}>
              <Loading />
            </TableCell>
          </TableRow> : null}
          {(!loading && dataSource.length === 0) ? <TableRow className='border-b-0 hover:bg-white'>
            <TableCell colSpan={columns.length} className={cn('text-center', 'h-50')}>
              <Empty />
            </TableCell>
          </TableRow> : null}
          {(!loading && dataSource.length > 0) ? dataSource.map((item: T, index: number) => {
            return <TableRow className='h-[40px] odd:bg-muted/50 w-full' key={item.id}>
              {columns.map((column) => {
                return <TableCell
                  className={cn('font-medium px-2 py-1')}
                  key={String(index) + column.dataIndex}
                  align={column.align}
                  width={column.width}
                  style={{ minWidth: column.width }}
                >
                  <span className={cn(column.ellipsis ? `break-all text-nowrap text-ellipsis overflow-hidden block` : '')} style={{ maxWidth: column.width }}>
                  {column.cell ? column.cell({
                    text: String(item[column.dataIndex] || ''),
                    record: item,
                    index: index
                  }) : (String(item[column.dataIndex]) || '--')}</span>
                </TableCell>
              })}
            </TableRow>
          }) : null}
        </TableBody>
      </Table>
    </div>
    <Pagination pagination={pagination} onPageChange={onPageChange} />
  </div>
}

export default AppTable